<!--
 * @Author: GuoShuning
 * @Date: 2022-12-13 15:42:53
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-17 15:10:36
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="./common/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>公共头部</title>
</head>

<body>
  <div class="dataScreenPage">
    <div class="left">
      <div class="leftTop itemBoxContent">
        <div class="itemTitle">
          <img src="./common/img/title.png" width="20px" height="20px" alt="" />
          <span>项目总览</span>
        </div>
        <div class="boxs">
          <div class="itemBox bg1">
            <div class="box1_title">签约项目总金额</div>
            <div class="box1_num">10000000</div>
          </div>
          <div class="itemBox bg2">
            <div class="box1_title">本年度签约总金额</div>
            <div class="box1_num">10000000</div>
          </div>
          <div class="itemBox bg3">
            <div class="box1_title">已回款项</div>
            <div class="box1_num">10000000</div>
          </div>
          <div class="itemBox bg4">
            <div class="box1_title">回款总进度</div>
            <div class="box1_num">10%</div>
          </div>
          <div class="itemBox bg5">
            <div class="box1_title">规划创建阶段项目</div>
            <div class="box1_num">10</div>
          </div>
          <div class="itemBox bg6">
            <div class="box1_title">立项启动阶段项目</div>
            <div class="box1_num">10</div>
          </div>
          <div class="itemBox bg7">
            <div class="box1_title">实施跟进阶段项目</div>
            <div class="box1_num">10</div>
          </div>
          <div class="itemBox bg8">
            <div class="box1_title">收尾维保阶段项目</div>
            <div class="box1_num">10</div>
          </div>
        </div>
      </div>
      <div class="leftBtm">
        <div class="leftBtm_left itemBoxContent">
          <div class="itemTitle">
            <img src="./common/img/title.png" width="20px" height="20px" alt="" />
            <span>预警走势曲线</span>
          </div>
          <div class="bottomLeftLine" id="bottomLeftLine"></div>
        </div>
        <div class="leftBtm_right itemBoxContent">
          <div class="itemTitle">
            <img src="./common/img/title.png" width="20px" height="20px" alt="" />
            <span>待审批事项统计</span>
          </div>
          <div class="bottomRightBar" id="bottomRightBar"></div>
        </div>
      </div>
    </div>
    <div class="right itemBoxContent">
      <div class="itemTitle">
        <img src="./common/img/title.png" width="20px" height="20px" alt="" />
        <span>项目状态统计</span>
      </div>
      <div class="rightPie" id="rightPie"></div>
    </div>
  </div>
</body>
<script>
  // 左侧菜单栏切换
  changeLeftMenu(0);
  function changeLeftMenu(index) {
    let menus = document.getElementsByClassName("leftMenu_itemMenu");
    for (let i = 0; i < menus.length; i++) {
      if (index == i) {
        document.getElementsByClassName("leftMenu_itemMenu")[i].className =
          "leftMenu_itemMenu leftMenu_activeMenu";
      } else {
        document.getElementsByClassName("leftMenu_itemMenu")[i].className =
          "leftMenu_itemMenu";
      }
    }
  }
  // 左侧菜单栏切换

  bottomLineChart(); // 预警走势曲线
  bottomBarChart(); // 待审批事项统计
  rightPieChart(); // 项目状态统计

  // 预警走势曲线
  function bottomLineChart() {
    let chart = echarts.init(document.getElementById("bottomLeftLine"));
    let option = {
      grid: {
        top: 30,
        right: 20,
        left: 10,
        bottom: 20,
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#86909C",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#DDDDDD",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#E5E8EF",
            type: "dashed",
          },
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          color: "#86909C",
          fontSize: 12,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#E5E8EF",
            type: "dashed",
          },
        },
      },
      series: [
        {
          color: "#4080FF",
          symbol: "none",
          smooth: true,
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#1EE7FF",
              },
              {
                offset: 0.5,
                color: "#24A9FF",
              },
              {
                offset: 1,
                color: "#6E44FB",
              },
            ]),
          },
        },
      ],
    };
    chart.setOption(option, true);
    chart.resize();
  }

  // 待审批事项统计
  function bottomBarChart() {
    let chart = echarts.init(document.getElementById("bottomRightBar"));
    let option = {
      color: ["#3E7BFA", "#00B2FF", "#80E2FF", "#4BDAAC"],
      grid: {
        top: 30,
        right: 20,
        left: 10,
        bottom: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        bottom: '0%',
        left: 'center',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: '#4E5969',
          fontSize: 12,
        },
        width: 450
      },
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#86909C",
          fontSize: 12,
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: "#E5E8EF",
          },
        },
        axisLine: {
          show: false,
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          color: "#86909C",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "#E5E8EF",
          },
        },
      },
      series: [
        {
          name: '成本概算审批',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          stack: "total",
          barWidth: 16,
        },
        {
          name: '采购清单审批',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          stack: "total",
          barWidth: 16,
        },
        {
          name: '采购审批（合同）',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          stack: "total",
          barWidth: 16,
        },
        {
          name: '采购审批（增项）',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          stack: "total",
          barWidth: 16,
        },
      ],
    };
    chart.setOption(option, true);
    chart.resize();
  }

  // 项目状态统计
  function rightPieChart() {
    let chart = echarts.init(document.getElementById("rightPie"));
    let option = {
      color: [
        "#3E7BFA",
        "#4BDAAC",
        "#2CBBF7",
        "#A38CFF",
        "#F6AB2A",
        "#6D9FFF",
      ],
      grid: {
        top: 160,
        right: 20,
        left: 10,
        bottom: 20,
        containLabel: true,
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: "0%",
        left: "center",
        icon: "roundRect",
        itemWidth: 18,
        itemHeight: 18,
        itemGap: 25,
        textStyle: {
          color: "#333333",
          fontSize: 14,
          rich: {
            a: {
              color: "#000",
              fontSize: 16,
              width: 200,
            },
            b: {
              color: "#1D2129",
              fontSize: 18,
              fontWeight: "bold",
            },
          },
        },
        formatter: function (name) {
          var data = option.series[0].data;
          var total = 0;
          var tarValue;
          for (var i = 0; i < data.length; i++) {
            total += data[i].value;
            if (data[i].name == name) {
              tarValue = data[i].value;
            }
          }
          var p =
            tarValue == 0 ? 0 : ((Number(tarValue) / total) * 100).toFixed(0);
          return ` {a|${name}：${tarValue}}                       {b|${p}%}`;
        },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "50%"],
          center: ["50%", "25%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 2,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "未开始" },
            { value: 735, name: "审批中" },
            { value: 580, name: "进行中" },
            { value: 484, name: "维保中" },
            { value: 300, name: "已完成" },
            { value: 300, name: "已延期" },
          ],
        },
      ],
    };
    chart.setOption(option, true);
    chart.resize();
  }
</script>

</html>